<template>
    <div class="flex-main">
        <div class="flex-top">
            <menu-tabs :menutab="menutab" @setMenutab="setMenutab"></menu-tabs>
        </div>
        <div class="flex-body">
            <no-data v-if="(orderlist.length==0 && !loading)"></no-data>
            <div v-else>
                <order-item class="mb" v-for="(item,index) in orderlist" :key="index" 
                :order="item" :orderIdx="index"
                @cancleOrder="cancleOrder"></order-item>
            </div>
        </div>
        
    </div>
</template>
<script>
import {orderList} from '@/api/mine';
export default {
    name:'',
    data () {
        return {
            menutab:['全部','未付款','待发货','待收货','待评价'],
            type:'',        //类型：''全部，0待付款，1待发货，2待收货，3待评价
            pageNo:1,
            orderlist:[],       //订单列表
            loading:true,
        }
    },
    components: {
        menuTabs:()=>import('@/components/menuTabs'),
        orderItem:()=>import('@/model/mine/orderItem'),
    },
    methods: {
        // 选择menu
        setMenutab(index) {
            if(index==0){
                this.type = '';
            }else{
                this.type = index-1;
            }
            this.getOrderList();
        },
        // 获取订单列表
        getOrderList() {
            let that = this;
            that.loading = true;
            this.$indicator.open('加载中...');
            let param = {
                page:that.pageNo,
                list_rows:10,
                customer_id:that.$utils.uid,
                type:that.type
            }
            orderList(param).then((result) => {
                that.orderlist = result.list.data;
                that.loading = false;
                this.$indicator.close();
            }).catch((err) => {
                this.$indicator.close();
            });
        },
        // 取消订单
        cancleOrder(orderIdx) {
            console.log(orderIdx);
            this.orderlist.splice(orderIdx,1);
        }
    },
    mounted() {
        this.$indicator.open('加载中...');
        this.getOrderList();
    }
}
</script>
<style lang="less" scoped src="@/less/mine/myOrders.less"></style>
